import { FC } from "react";
import { useHistory } from "react-router-dom";
import "../myFile/css/myFile.css"
interface MyFileProps {
    data: object
}
const MyFile: FC<MyFileProps> = (props) => {
    const history = useHistory()
    return (
        <div className="myFile">
            {
                Object.keys(props.data).map((item, index) => {
                    return <div className="myFileDiv"  key={index}>
                        <h2>{item}</h2>
                        <div className="myFileItem">
                        {
                            Object.keys((props.data as any)[item]).map((it,i) => {
                                return <h3 key={i}>{it}</h3>
                            })
                        }
                        <ul>
                            {
                                Object.keys((props.data as any)[item]).map((it) => {
                                    {
                                        return (props.data as any)[item][it].map((value: any) => {
                                            return <li key={value.id} onClick={()=>{
                                                history.push(`/home/fileDetails/${value.id}`)
                                            }}>
                                                <a href="" >
                                                    <span className="myFileItemSpanLeft">
                                                        <time >{value.updateAt}</time>
                                                    </span>
                                                    <span className="myFileItemSpanRigtht">{value.title}</span>
                                                </a>
                                            </li>
                                        })
                                    }
                                })
                            }
                        </ul>
                        </div>
                        
                    </div>
                })
            }
        </div>
    )
}
export default MyFile
